$(function () {
  // layUI导入的方法
  let layer = layui.layer;
  let form = layui.form;
  // 页面一打开就 获取文章的列表
  initArtCateList();
  // 获取文章的列表 的函数
  function initArtCateList() {
    // 1---发起ajax 获取数据  为后面调用模板引擎做准备
    $.ajax({
      type: "GET",
      url: "/my/article/cates",
      success: function (res) {
        // console.log(res);
        if (res.status !== 0) {
          return layer.msg("获取文章分类列表失败！");
        }
        // layer.msg("获取文章分类列表成功！");
        // 2-----调用模板引擎
        let htmlStr = template("tpl-table", res);
        // 3------添加到htmml结构中
        $("#tbody").html(htmlStr);
      },
    });
  }

  // =====================添加功能开始==================

  //   ----当用户点击 添加类别按钮时  添加点击事件  通过layUI的 --layer.open 生成弹出层-----
  let indexAdd = null; //后面关闭弹出框要用
  $("#addCateBtn").on("click", function () {
    // 1-----生成添加  弹出层
    indexAdd = layer.open({
      title: "添加文章分类", //标题
      content: $("#dialog-add").html(), //内容区域 通过把内容放到html结构中 再调用
      type: 1, //  表示页面层
      area: ["500px", "250px"], //宽高
    });
  });

  //   --------当用户添加完 类别数据后 为add 页面的  form表单添加提交事件委托-----------
  $("body").on("submit", "#form-add", function (e) {
    // 1----阻止默认提交行为
    e.preventDefault();
    // alert(11);
    // ----2---发起ajax请求   把表单信息提交到服务器
    $.ajax({
      type: "POST",
      url: "/my/article/addcates",
      data: $(this).serialize(),
      success: function (res) {
        // console.log(res);
        if (res.status !== 0) {
          return layer.msg("新增文章分类失败！");
        }
        // 3------加载数据
        initArtCateList();
        layer.msg("新增文章分类成功！");
        // 4-----------关闭弹出层
        layer.close(indexAdd);
      },
    });
  });

  //======================添加功能结束=============================

  // —————————————————————————修改功能开始——————————————————————————————

  //   --------用户点击编辑按钮后---为btn-edit按钮添加提交事件委托-------------
  let indexEdit = null;
  $("#tbody").on("click", ".btn-edit", function () {
    // ---1--生成编辑页面  弹出层
    indexEdit = layer.open({
      title: "修改文章分类",
      content: $("#dialog-edit").html(),
      type: 1,
      area: ["500px", "250px"],
    });
    // 2----拿到自定义索引号 id  （编辑按钮自定义的属性）
    let id = $(this).attr("data-id");
    // 3-------发起ajax请求  拿到相应id的 对应的数据
    $.ajax({
      method: "GET",
      url: "/my/article/cates/" + id, //把自定义索引号传递给服务器拿回相应的数据的参数
      success: function (res) {
        // console.log(res);
        if (res.status !== 0) {
          return layer.msg("获取文章分类数据失败！");
        }
        //--4---通过 form.val 快速为表单赋值  表单要有 lay-filter 属性
        form.val("form-edit", res.data);
      },
    });
  });

  //   ------用户修改后-----为form-edit 页面  添加提交事件委托--------------------
  $("body").on("submit", "#form-edit", function (e) {
    //   1-----阻止默认提交行为
    e.preventDefault();
    // -------2---发起ajax请求 把表单数据提交到服务器
    $.ajax({
      type: "POST",
      url: "/my/article/updatecate",
      data: $(this).serialize(),
      success: function (res) {
        console.log(res);
        if (res.status !== 0) {
          return layer.msg("更新分类信息失败！");
        }
        // 3弹出提示消息
        layer.msg("更新分类信息成功！");
        // 4------关闭弹出层
        layer.close(indexEdit);
        // 5--------调用  获取文章列表函数  获取用户的列表
        initArtCateList();
      },
    });
  });
  // ————————————————————————————————修改功能结束——————————————————————————————

  // ^^^^^^^^^^^^^^^^^^^^^^删除功能开始^^^^^^^^^^^^^^^^^^^^^^

  //   -----------为btn-delete按钮通过事件委托的形式 添加点击-事件-------------------
  $("#tbody").on("click", ".btn-delete", function () {
    // 1--获取要删除数据的 id值
    let id = $(this).attr("data-id");
    // 2---弹出确认框  提醒用户
    layer.confirm("确认删除吗?", { icon: 3, title: "提示" }, function (index) {
      // 3---在回调函数中 调用ajax 删除数据
      $.ajax({
        method: "GET",
        url: "/my/article/deletecate/" + id, //把自定义索引号传递给服务器拿回相应的数据的参数
        success: function (res) {
          // console.log(res);
          if (res.status !== 0) {
            return layer.msg("删除文章分类失败！");
          }
          // 4   弹出提醒
          layer.msg("删除文章分类成功！");
          // 5   关闭确认框
          layer.close(index);
          // 6   重新加载文章列表
          initArtCateList();
        },
      });
    });
  });
  // ^^^^^^^^^^^^^^^^^^^^^^删除按钮功能 结束^^^^^^^^^^^^^^^^^^^^^^
});
